<template>
	<view class="columnbox wdh-100 content">
		<!-- <u-sticky bgColor="#fff" class="wdh-100">
			<u-tabs :current='curtype' :list="type" @click="typeChange"></u-tabs>
		</u-sticky> -->
		<view class="columnbox top-box wdh-100">
			<view class="rowbox wdh-100 spb">
				<view class="columnbox" v-for="(item,index) in status" :key='index' @click="setStatus(item.value)">
					<view class="one-status rowbox" :class="{'sel-status':item.value==curstatus}">{{item.name}}</view>
					<view v-if="item.value==curstatus" class="tab-line"></view>
				</view>
			</view>
			<view class="rowbox wdh-100 jus" style="margin-top: 36rpx;">
				<picker :range="stationList" range-key="name" @change="stationChange">
					<view class="rowbox station spb">
						<view>{{stationList[curstation].name}}</view>
						<u-icon name="arrow-right" size="24rpx"></u-icon>
					</view>
				</picker>

				<view @click="setDate(item.value)" class="rowbox date-box" :class="{'sel-box':item.value==curtype}"
					v-for="(item,index) in type" :key='index'>{{item.name}}</view>
			</view>
		</view>
		<view class="sta-box rowbox" style="margin-bottom: 20rpx;">
			<view class="columnbox item">
				<view class="num">{{staticdata.sashOrder||0}}</view>
				<view class="title">订单数</view>
			</view>
			<view class="columnbox item">
				<view class="num"><text style="font-size: 24rpx;margin-right: 4rpx;">¥</text>{{staticdata.sales||0}}
				</view>
				<view class="title">营业额</view>
			</view>
		</view>
		<view class="columnbox one-box" v-for="(item,index) in list" :key='index' @click="showDetail(item)">
			<view class="rowbox wdh-100 spb">
				<view class="title rowbox wdh-100 spb">
					<view class="rowbox">{{item.stationName}} <u-icon color="#212121" size="28rpx" name="arrow-right"
							style="margin-left: 10rpx;"></u-icon> </view>
				</view>
				<view class="rowbox s-qj">{{item.doorType}}</view>
			</view>
			<view class="rowbox wdh-100 jus" style="margin-top: 20rpx;">
				<image mode="aspectFill" class="o-img" :src="item.img">
				</image>
				<view class="columnbox o-info als">
					<view class="room-name rowbox wdh-100 spb">
						<view>{{item.doorName}}</view>
						<view class="payCash" v-if="item.payCash&&item.overPayCash=='0'">
							<text style="font-size: 24rpx;">¥</text> {{item.payCash}}
						</view>
					</view>
					<view class="o-desc">开始时间 {{item.beginTime}}</view>
					<view class="o-desc">结束时间 {{item.endTime||'-'}}</view>
					<view class="o-desc rowbox wdh-100 spb">
						<view>洗车时长 {{item.orderStatus==0?'洗车中':'已完成'}}</view>
						<view class="payOrderType" v-if="item.payOrderType">{{item.payOrderType}}</view>
					</view>
					<view class="o-desc">手机号码 {{item.phonenumber}}</view>
				</view>
			</view>
			<view class="rowbox wdh-100 o-price spb als" style="color: #000000;" v-if="item.overPayCash!='0'">
				<view style="font-weight: normal;">洗车费¥{{item.payCash}} 超时费￥{{item.overDurationFee}}</view>
				<view class="rowbox">合计：
					<view class="payCash" v-if="item.payCash">
						<text style="font-size: 24rpx;color: #FF672D;">¥</text> {{item.totalPayCash}}
					</view>
				</view>
			</view>
			<view class="rowbox wdh-100 o-price spb als" style="justify-content: flex-end;">
				<view v-if="item.orderStatus==0" class="rowbox o-btn" @click.stop="endOrder(item)">结束订单</view>
				<view class="wdh-100 rowbox" style="justify-content: flex-end;" v-else-if="item.orderStatus==1">
					<!-- <view @click="" style="margin-right: 20rpx;" class="rowbox o-btn fp-btn">开具发票</view> -->
					<!-- <view @click="" class="rowbox o-btn">再次洗车</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: [{
					name: '近7天',
					value: 0
				}, {
					name: '近30天',
					value: 1
				}, {
					name: '近90天',
					value: 2
				}],
				curtype: 0,

				status: [{
						name: '进行中',
						value: 0
					}, {
						name: '已完成',
						value: 1
					}, {
						name: '已退款',
						value: 2
					},
					{
						name: '全部',
						value: -1
					}
				],
				curstatus: 0,

				list: [],
				moreflag: true,
				pageNum: 1,
				stationList: [],
				curstation: 0,
				staticdata: ''
			};
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			if (this.moreflag) {
				this.pageNum++
				this.getList()
			}
		},
		methods: {
			// 结束订单
			endOrder(e){
				console.log(e)
				this.$modal.confirm('是否确认结束订单?').then(res=>{
					console.log(res)
					if(res){
						this.$modal.loading('加载中')
						this.$req.put(`/xcx/washOrder/finish/${e.orderId}`).then(res => {
							this.$modal.closeLoading()
							if (res.data.code == 200) {
								this.pageNum=1
								this.list=[];
								this.getData();
							}else{
								this.$modal.msg(res.data.msg)
							}
							})
					}
				})
				
			},
			stationChange(e) {
				this.curstation = e.detail.value
				this.getList()
			},
			showDetail(v) {
				uni.navigateTo({
					url: './detail?id=' + v.orderId
				})
			},
			getData() {
				this.$modal.loading('加载中');
				this.$req.get('/xcx/manager/count/station/listAll').then(res => {
					// console.log(res)
					this.$modal.closeLoading();
					let list = [{
						name: '全部洗车站',
						stationId: -1
					}]
					this.stationList = [...list, ...res.data.data]
					this.getList()
				})
			},
			setStatus(v) {
				this.curstatus = v
				this.list = []
				this.getList()
			},
			setDate(v) {
				this.curtype = v
				this.list = []
				this.getList()
			},
			typeChange(e) {
				this.curtype = e.value
				this.list = []
				this.pageNum = 1
				this.getList()
			},
			getList() {
				// console.log({
				// 	type: this.curtype,
				// 	pageNum: this.pageNum,
				// 	pageSize: 20,
				// 	orderStatus: this.curstatus,
				// 	stationIds: this.stationList[this.curstation].stationId
				// })
				this.$modal.loading('加载中');
				this.$req.get('/xcx/manager/count/washOrder', {
					type: this.curtype,
					pageNum: this.pageNum,
					pageSize: 20,
					orderStatus: this.curstatus,
					stationIds: this.stationList[this.curstation].stationId,
					isAsc:'desc'
				}).then(res => {
					this.$modal.closeLoading();
					console.log(res)
					if (res.data.data) {
						this.staticdata = res.data.data
						if (res.data.data.washOrderDoorVos.length > 0) {
							this.list = this.list.concat(res.data.data.washOrderDoorVos).reverse()
							// console.log(this.list)
							this.moreflag = res.data.data.washOrderDoorVos.length == 20 ? true : false
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		justify-content: flex-start;
		background: #F4F5FA;
		padding-bottom: 20rpx;
	}

	.o-box {
		width: 710rpx;
		background: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.name {
		font-size: 32rpx;
		width: 100%;
	}

	.detail-box {
		width: 100%;
		font-size: 28rpx;
		margin-top: 10rpx;
		justify-content: flex-start;

		& .title {
			width: 150rpx;
			color: #7c7e7e;
		}

		& .item {
			color: #262626;
		}
	}

	.top-box {
		background: #F4F5FA;
		padding: 20rpx 30rpx;

		.one-status {
			font-family: PingFang SC, PingFang SC;
			font-size: 24rpx;
			color: #212121;
			width: 100rpx;
		}

		.sel-status {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #126BC9;
		}

		.tab-line {
			width: 36rpx;
			height: 6rpx;
			background: #126BC9;
			border-radius: 3rpx;
		}
	}

	.date-box {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
		width: 94rpx;
		height: 42rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid #72778A;
		margin-right: 36rpx;
	}

	.sel-box {
		background: #126BC9;
		border: 2rpx solid #126BC9;
		color: #fff;
	}

	.sta-box {
		width: 690rpx;
		height: 162rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-top: 20rpx;

		.item {
			width: 50%;

			.num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 40rpx;
				color: #FF672D;
			}

			.title {
				margin-top: 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-size: 24rpx;
				color: #000000;
			}
		}
	}


	.one-box {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		position: relative;

		.title {
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #000000;
			padding-bottom: 20rpx;
			border-bottom: #F6F6F6 solid 1px;
		}

		.zz-box {
			background-color: rgba(119, 40, 245, 0.28);
			color: rgba(119, 40, 245, 1);
			font-size: 28rpx;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			line-height: 32rpx;
		}

		.o-img {
			width: 178rpx;
			height: 178rpx;
			border-radius: 12rpx;
		}

		.o-info {
			margin-left: 20rpx;
			width: calc(100% - 190rpx);
			height: 190rpx;
			justify-content: space-between;
		}

		.room-name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #000000;
		}

		.o-desc {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #72778A;
		}

		.o-price {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 24rpx;
			color: #FF672D;
			margin-top: 20rpx;

			text {
				color: #000;
				font-size: 32rpx;
			}
		}

		.o-bottom-box {
			margin-top: 20rpx;

			.location-box {
				font-size: 24rpx;
				color: #6D6A6B;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}


		}
	}

	.o-btn {
		height: 62rpx;
		background: #126BC9;
		border-radius: 12rpx;
		padding: 0 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.fp-btn {
		background: #fff;
		background: rgba(18, 107, 201, 0.1);
		border-radius: 12rpx;
		border: 2rpx #17698F solid;
		color: #17698F;
	}


	.or-price {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 40rpx;
		color: #FF672D;
	}

	.s-qj {
		height: 34rpx;
		background: #126BC9;
		border-radius: 0px 0px 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 20rpx;
		color: #FFFFFF;
		position: absolute;
		padding: 0 10rpx;
		top: 0;
		right: 40rpx;
	}

	.payOrderType {
		font-family: PingFang SC, PingFang SC;
		font-size: 24rpx;
		color: #000000;
	}

	.payCash {
		color: #FF672D;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 40rpx;
	}

	.station {
		width: 244rpx;
		height: 42rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 4rpx 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-size: 24rpx;
		color: #212121;
		margin-right: 20rpx;
	}
</style>